<template>
    <view class="library-content">
        <view
            class="library-card"
            v-for="(item, index) in cardList"
            :key="index"
            @click="navigatorToCultyreLibraryView"
        >
            <view class="card-image">
                <image class="image" :src="item.image"></image>
            </view>

            <view class="card-info">
                <view class="card-title">
                    <text class="title">{{ item.title }}</text>
                </view>

                <view class="card-tag">
                    <view class="tag" v-for="tag in item.tags" :key="tag.id">{{
                        tag.name
                    }}</view>
                </view>

                <view class="card-desc">
                    <text class="desc">{{ item.desc }}。</text>
                </view>

                <view class="card-footer">
                    <text class="time">{{ item.time }}</text>

                    <text class="reading">{{ item.reading }}</text>
                </view>
            </view>

            <han-icon name="remen" size="48" class="icon-hot" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const cardList = ref([
    {
        image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.sdQ2KgHLMhIyEME8cjLUcAHaKJ?rs=1&pid=ImgDetMain&cb=idpwebpc2',
        title: '汉服的历史演变与文化意义',
        tags: [
            {
                id: 1,
                name: '汉服历史'
            },
            {
                id: 2,
                name: '汉服文化'
            }
        ],
        desc: '汉服，全称是"汉民族传统服饰"，又称汉衣冠、汉装、华服，是从黄帝即位到公元17世纪中叶（明末清初），在汉族的主要居住区...',
        time: '2025-05-11',
        reading: '在读人数：1.3W'
    },
    {
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.9ab372fb3cdabc1a532ea90b437ff812?rik=WuNR4n%2bG1zAoKQ&riu=http%3a%2f%2fimage.yjcf360.com%2fu%2fcms%2fwww%2f202101%2f26152617bsy3.jpg&ehk=tezOr3QvKd81AOeb00I8zVVgTlebfaYpLatfkJTSgHs%3d&risl=&pid=ImgRaw&r=0',
        title: '唐代服饰特点与现代汉服设计的融合',
        tags: [
            {
                id: 1,
                name: '汉服历史'
            },
            {
                id: 2,
                name: '汉服文化'
            }
        ],
        desc: '唐代服饰以色彩鲜艳、图案丰富、款式多样而著称。其特点是宽袖大袍，衣料轻薄飘逸，体现了盛唐时期的开放与包容...',
        time: '2025-05-10',
        reading: '在读人数：0.8W'
    },
    {
        image: 'https://ts1.tc.mm.bing.net/th/id/R-C.eab33df11bf40121a55b5cd472498a51?rik=%2bB3SR5XEpz5Tvg&riu=http%3a%2f%2fimg.alicdn.com%2fbao%2fuploaded%2fi4%2f2378957693%2fO1CN01AcLa8T26hRanK5Lxe_!!2378957693.jpg&ehk=pMUj0Tmqx9SkZrJ0bzlgrEFZ%2fyZVKwmAeobw%2bos6T%2bE%3d&risl=&pid=ImgRaw&r=0',
        title: '汉服礼仪：从日常到节庆的穿着规范',
        tags: [
            {
                id: 1,
                name: '汉服历史'
            },
            {
                id: 2,
                name: '汉服文化'
            }
        ],
        desc: '汉服不仅是一种服饰，更承载着深厚的礼仪文化。不同场合、不同身份、不同季节都有相应的穿着规范...',
        time: '2025-05-09',
        reading: '在读人数：1.1W'
    }
]);

const navigatorToCultyreLibraryView = () => {
    uni.navigateTo({
        url: '/pages/han_culture_library/subpages/cultyre_library_view/cultyreLibraryView'
    });
};
</script>

<style scoped lang="scss">
.library-content {
    padding-bottom: 100rpx;
    margin: 20rpx;

    .library-card {
        display: flex;
        margin-bottom: 20rpx;
        border-radius: $han-border-radius-md;
        border: 1rpx solid $han-global-border-color;
        padding: 20rpx;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
        position: relative;

        .icon-hot {
            position: absolute;
            top: 0;
            right: 0;
        }

        .card-image {
            width: 200rpx;
            height: 200rpx;
            overflow: hidden;
            border-radius: $han-border-radius-md;
            background: $han-global-bg-color;

            .image {
                width: 100%;
                height: 100%;
            }
        }

        .card-info {
            flex: 1;
            margin-left: 20rpx;
            display: flex;
            flex-direction: column;
            height: 200rpx;

            .card-title {
                width: 95%;

                .title {
                    font-size: $han-font-size-base;
                    font-weight: bold;
                    color: $han-global-primary-font-color;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .card-tag {
                margin-top: 10rpx;
                display: flex;
                gap: 10rpx;
                flex-wrap: wrap;

                .tag {
                    font-size: $han-font-size-xs;
                    color: $han-primary-color;
                    padding: 5rpx 10rpx;
                    border: 1rpx solid $han-primary-color;
                    border-radius: $han-border-radius-sm;
                }
            }

            .card-desc {
                margin-top: 10rpx;
                flex: 1;

                .desc {
                    font-size: $han-font-size-sm;
                    color: $han-global-secondary-font-color;
                    line-height: 1.3;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .card-footer {
                margin-top: auto;
                display: flex;
                align-items: center;
                margin-top: 4rpx;
                padding-top: 4rpx;
                border-top: 1rpx dashed $han-global-border-color;

                .time {
                    font-size: $han-font-size-sm;
                    color: $han-global-secondary-font-color;
                }

                .reading {
                    font-size: $han-font-size-sm;
                    color: $han-primary-color;
                    margin-left: auto;
                    font-weight: bold;
                }
            }
        }
    }
}
</style>
